<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.id == ''"
              style="color: red"
              >*</span
            >
            <span v-else>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lineSpear"
          label="类别"
          align="center"
          ><template slot-scope="scope">
            <span v-if="scope.row.lineSpear !== ''">{{
              scope.row.lineSpear
            }}</span>
            <el-select
              v-else
              v-model="lineSpearInput"
              placeholder="请选择类别"
            >
              <el-option
                v-for="item in lineSpearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </template
        ></el-table-column>
        <el-table-column
          prop="topSpeed"
          label="文档名称"
          align="center"
          ><template slot-scope="scope">
            <span v-if="scope.row.topSpeed !== ''">{{
              scope.row.topSpeed
            }}</span>
            <el-input
              v-else
              v-model="topSpeedInput"
              placeholder="文档名称"
            ></el-input> </template
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="文档链接"
          align="center"
          ><template slot-scope="scope">
            <span v-if="scope.row.remark !== ''">{{ scope.row.remark }}</span>
            <el-input
              type="file"
              v-else
              v-model="remarkInput"
              id="fileIn"
              placeholder="xx 吨"
            ></el-input> </template
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row)"
              >删除</el-button
            >
            <el-button
              v-else
              type="text"
              @click="saveHandler(scope.row)"
              >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineSpearInput: '',
      topSpeedInput: '',
      remarkInput: '',
      lineSpearOptions: [
        {
          label: '类别1',
          value: '类别1',
        },
        {
          label: '类别2',
          value: '类别2',
        },
      ],
      tableData: [
        {
          id: 1,
          lineSpear: '类别1',
          topSpeed: 'xx施工技术规范',
          remark: 'xxx.pdf',
        },
      ],
      total: 0,
      pagesiz: 10,
      currentPage: 1,
      renderData: [],
    }
  },

  mounted() {
    this.renderPage()
  },

  methods: {
    renderPage() {
      this.tableData.push({
        id: '',
        lineSpear: '',
        topSpeed: '',
        remark: '',
      })
      this.renderData = this.tableData
      this.total = this.renderData.length
    },

    handleSizeChange(v) {
      console.log('v::: ', v)
    },

    handleCurrentChange(v) {
      this.currentPage = v
    },

    saveHandler(v) {
      if (
        this.lineSpearInput == '' ||
        this.topSpeedInput == '' ||
        this.remarkInput == ''
      )
        return
      v.id = this.renderData.length
      v.lineSpear = this.lineSpearInput
      v.topSpeed = this.topSpeedInput
      v.remark = this.remarkInput

      this.tableData.push({
        id: '',
        lineSpear: '',
        topSpeed: '',
        remark: '',
      })

      this.renderData = this.tableData
      this.total = this.renderData.length
      this.lineSpearInput = ''
      this.topSpeedInput = ''
      this.remarkInput = ''
    },

    deleteHandler(v) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (v.id == this.tableData[i].id) {
          this.tableData.splice(i, 1)
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-input__inner) {
  border: none;
  background-color: rgba(255, 255, 255, 0);
}
:deep(.el-textarea__inner) {
  border: none !important;
  background-color: rgba(255, 255, 255, 0);
  resize: none;
}
</style>
